<template>
    <draggable
        :list="list"
        :component-data="{
            tag: 'div',
            class: list.length ? 'listView' : 'listView Empty',
            type: 'transition-group',
            name: !drag ? 'flip-list' : null,
        }"
        v-bind="{
            animation: 200,
            group: 'Element',
            disabled: false,
            ghostClass: 'ghost',
        }"
        @start="drag = true"
        @end="drag = false"
        item-key="OrderId"
        handle=".Move"
    >
        <template #item="{ element, index }">
            <EleMapping :option="element" :index="index" />
        </template>
    </draggable>
</template>
<script setup>
import { provide, ref, watch } from "vue";
import EleMapping from "./EleMapping.vue";
import draggable from "vuedraggable";

const props = defineProps(["list"]);

const drag = ref(false);

provide("DeleteItem", function (index) {
    props.list.splice(index, 1);
});
</script>
<style scoped>
.Empty {
    background-image: url(../../Assets/Empry.png);
    background-size: 20% auto;
    background-repeat: no-repeat;
    background-position: center center;
}
.listView {
    padding: 16px 0;
    height: 100%;
    min-height: 150px;
    border: 1px dashed #ccc;
}
</style>
